<template>
	<view >
		<search></search>
		<!-- 轮播图 -->
	  <view class="content">
	  	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	  		<swiper-item v-for="item in lunboList" :key="item.goods_id">
				<image :src="item.image_src" mode="widthFix"></image>
	  		</swiper-item>
	  	</swiper>
	  </view>
	  <!-- 导航栏 -->
	  <view class="nav">
	  	<view class="nav-item" v-for="(item,index) in navs" :key="index" @click="navItem(item.path)">
	  		<view><image :src="item.image_src" mode="widthFix"></image></view>
	  	</view>
	  </view>
	  <!-- 推荐商品 -->
	  <view class="hot_goods">
		<view class="good_list"  >
			<view class="good-type" v-for="item1 in goodType" >
				<!-- 标题 -->
				<view class="good-type-name">
					<image :src="item1.floor_title.image_src" mode="widthFix"></image>
				</view>
				<!-- 内容 -->
				<view class="good-item">
					<view
					v-for="(item2,index2) in item1.product_list"
                    :key="item1.name"
					>
						<image :src="item2.image_src" :mode="index2==0?'widthFix':'scaleToFill'" @click="goDetail(item2.name)"></image>
					</view>
				</view>
			</view>
		</view>
	  </view>
	</view>
</template>

<script>
	//引入组件
 import search from "../../components/serch.vue"
	export default {
		data() {
			return {
				lunboList:[],
				goodList:[],
				goodType:[],
				navs:[]
			}
		},
		onLoad() {
			    this.getlunbo();
				this.getgoodList();
				this.getnav()
			},
		methods: {
         async getlunbo(){
         	const res=await this.$myRequest({
         		url:'/api/public/v1/home/swiperdata'
         		 })
         		console.log(res)
				this.lunboList=res.data.message
         	},
			
			async getgoodList(){
				const res=await this.$myRequest({
					url:'/api/public/v1/home/floordata'
					 })
					console.log("hhh",res.data.message)
					this.goodType=res.data.message
				},
				async getnav(){
					const res=await this.$myRequest({
						url:'/api/public/v1/home/catitems'
						 })
						console.log("hhh",res.data.message)
						this.navs=res.data.message
					},
				// 导航栏跳转
               navItem(url){
				   console.log(url)
				   uni.navigateTo({
				   	url
				   })
			   },
			   // 跳转到详情页
			   goDetail(res){
				   console.log(res)
				   uni.navigateTo({
				   	url:'/pages/good_list/good_list?query='+res
				   })
			   }
		},
		// 注册组件
		components:{
			search
		}
	}
</script>

<style lang="scss">
	.content{
		swiper{
			width: 750rpx;
			height: 340rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 130rpx;
		border-bottom: 1rpx solid gainsboro;
		.nav-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 8rpx;
			image{
				width: 110rpx;
				height:110rpx;
			}
		}
	}
	.good-type{
		.good-type-name{
			margin-bottom: 5rpx;
			image{
				width: 100%;
			}
		}
		.good-item{
			overflow: hidden;
			view{
				float: left;
				width: 33.33%;
				&:nth-last-child(-n+4){
					height: 33.33% * 386 / 232 / 2;
				}
				image{
					width: 100%;
					height: 205rpx;
				}
			}
		}
	}
</style>
